<template>
	<view class="content">
		<view v-if="status">
			<view class="title-img">
			</view>

			<view class="date-line">
				<up-divider :text="dateTime" textColor="#FEF1C4" lineColor='#FEF1C4' :hairline="false"></up-divider>
			</view>

			<view class="btnArr">
				<view :class="['r-btn', dayActive ? 'r-btn-l' : 'r-btn-b']" @click="toggleDay"></view>
				<view :class="['r-btn', totalActive ? 'l-btn-l' : 'l-btn-b']" @click="toggleTotal"></view>
			</view>

			<view style="overflow-y: auto; -webkit-overflow-scrolling: touch;">

				<!-- 前三名 -->
				<view class="oneTT" v-for="(item,index) in day3" :key="index">
					<view class="topBg"><view v-if="dayActive">今日</view>房间总流水第{{index+1}}名</view>
					<view class="boxContent">
						<view class="TTheader" :style="{backgroundImage: `url(${item.avatar})`}">
							<image class="TTbg" :src="imgback(index+1)"></image>
						</view>
						<view class="nickname">{{item.title}}</view>
						<view class="wallet">
							<view class="yue Diamond" v-if="totalActive">钻石：{{item.goldNum}}</view>
							<view class="yue money">流水：{{item.totalGoldNum}}</view>
						</view>
						<view v-if="dayActive">
							<view class="desc" v-if="index==0">
								V9贵族神特权奖励一名+王者头像框*9份*7天+定制进场特效特效*9份*7天+全麦1000心动炸档互动*1
							</view>
							<view class="desc" v-if="index==1">
								V9贵族神特权奖励一名+王者头像框*9份*7天+定制进场特效特效*9份*7天+全麦1000心动炸档互动*1
							</view>
							<view class="desc" v-if="index==2">
								V9贵族神特权奖励一名+王者头像框*9份*7天+定制进场特效特效*9份*7天+全麦1000心动炸档互动*1
							</view>
						</view>
						<view class="desc" v-else>
							<view class="desc" v-if="index==0">
								25-26号，活动期间平台流水前5名的厅的总流水的1% 的钻石奖励+banner首页专访展示
							</view>
							<view class="desc" v-if="index==1">
								25-26号，活动期间平台流水前5名的厅的总流水的0.5%的钻石奖励
							</view>
							<view class="desc" v-if="index==2">
								25-26号，活动期间平台流水前5名的厅的总流水的0.2%的钻石奖励
							</view>
						</view>
					</view>
				</view>

				<!-- 后面的列表 -->
				<view class="listTT" v-for="(item,index) in day4list" :key="index" v-if="day4list.length>0 && day4list">
					<view class="listContent">
						<view style="padding: 0 15px 0;font-size: 12px; font-weight: 600;">{{index+4}}</view>
						<view class="listheader" :style="{backgroundImage: `url(${item.avatar})`}">
						</view>
						<view class="nickname" style="width: 100px;">{{item.title}}</view>
					</view>
					<view class="listwallet">
						<!-- <view class="yue ">钻石：{{item.goldNum}}</view> -->
						<view class="yue " style="margin-top: 5px;">流水：{{item.totalGoldNum}}</view>
					</view>
				</view>

			</view>
			<up-loading-page :loading="loading" bgColor="rgba(0,0,0,0.3)"></up-loading-page>

		</view>

		<view v-else style="height: 100vh;">

			<view class="title-img">
			</view>
			<view style="    color: #fff;
			margin-top: 100px;
    font-size: 30px;
    display: flex;
    justify-content: center;">
				活动已结束
			</view>
		</view>

	</view>
</template>

<script setup nonce="random123">
	const loading = ref(false)

	import {
		computed,
		reactive,
		ref,
		onMounted,
		nextTick,
		onBeforeMount
	} from 'vue';
	import {
		getDay,
		getTotal,
		getStatus
	} from '@/common/api.js';
	const dateTime = '25日-26日'

	// 状态管理
	const dayActive = ref(true); // 默认激活“日视图”
	const totalActive = ref(false);
	const img = ref('https://www.helloimg.com/i/2025/02/24/67bc4bb0c1531.png')
	const imgback = (i) => {
		return `../../static/${i}.png`
	}

	const day3 = ref([])
	const day4list = ref([])
	// 切换逻辑
	const toggleDay = () => {
		getD()
	};

	const toggleTotal = () => {
		getT()
	};

	const status = ref(false)

	onBeforeMount(() => {
		getStatus({}).then((res) => {
			console.log(res,"rerererererererere")
			status.value = res
		}).catch((res) => {

		})
	})

	onMounted(() => {
		nextTick(() => {
			getD()
			// getT()
		});
	});

	const splitArray = (arr, index) => {
		return [arr.slice(0, index), arr.slice(index)];
	}

	// 日榜
	const getD = () => {
		loading.value = true
		getDay({}).then((res) => {
			let [day3_1, day3_list] = splitArray(res, 3)
			day3.value = day3_1
			day4list.value = day3_list
			dayActive.value = true;
			totalActive.value = false;
			loading.value = false
		}).catch((res) => {
			loading.value = false
		})
	}

	// 总榜
	const getT = () => {
		loading.value = true
		getTotal({}).then((res) => {
			let [day3_1, day3_list] = splitArray(res, 3)
			day3.value = day3_1
			day4list.value = day3_list

			dayActive.value = false;
			totalActive.value = true;
			loading.value = false
		}).catch((res) => {

			loading.value = false
		})
	}
</script>

<style>
	uni-page-body {
		height: -webkit-fill-available !important;
	}

	.u-line {
		border-bottom: 2px solid #FEF1C4 !important;
	}

	.content {
		background-image: url('../../static/bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		/* height: -webkit-fill-available !important; */
		position: absolute;
		width: 100%;
	}

	.title-img {
		background-image: url('../../static/title.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 90%;
		height: 180px;
		display: block;
		top: 60px;
		margin: auto;
		margin-top: 60px;
	}

	.date-line {
		margin: auto;
		width: 40%;
	}

	.btnArr {
		display: flex;
		justify-content: space-between;
		width: 80%;
		margin: auto;
	}

	.r-btn,
	.l-btn {
		height: 55px;
		width: 145px
	}

	.r-btn-l {
		background: url('../../static/day-l.png') no-repeat 100% 100%;
		background-size: 100% 100%;
	}

	.l-btn-l {
		background: url('../../static/total-l.png') no-repeat 100% 100%;
		background-size: 100% 100%;
	}

	.r-btn-b {
		background: url('../../static/day-b.png') no-repeat 100% 100%;
		background-size: 100% 100%;
	}

	.l-btn-b {
		background: url('../../static/total-b.png') no-repeat 100% 100%;
		background-size: 100% 100%;
	}
</style>

<style>
	.oneTT {
		height: 260px;
		width: 80%;
		margin: auto;
		color: #fff;
		font-size: 12px;
		margin-top: 30px;
		background: url('../../static/border.png') no-repeat 100% 100%;
		background-size: 100% 100%;
		position: relative;
		padding-top: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.boxContent {
		width: 100%;
	}

	.topBg {
		background: url('../../static/rank-bg.png') no-repeat 100% 100%;
		background-size: 100% 100%;
		height: 36px;
		width: 60%;
		/* margin: auto; */
		top: -16px;
		left: 50%;
		transform: translate(-50%, 0);
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.TTheader {
		height: 80px;
		width: 80px;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin: auto;
		border-radius: 10px;
		border: 2px solid #FEF1C4;
		position: relative;
	}

	.TTbg {
		width: 30px;
		height: 20px;
		margin: auto;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 0);
		position: absolute;
	}

	.nickname {
		margin: 10px 0;
		text-align: center;
		font-weight: 600;
		padding: 0 5px;
	}

	.wallet {
		display: flex;
		justify-content: space-around;
		width: 100%;
		/* height: 50px; */
		/* padd */
	}

	.yue {
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 0.1);
		/* width: 30px; */
		height: 100%;
		padding: 2px 20px;
	}

	.desc {
		margin: 10px 0;
		padding: 0 10px;
		text-indent: 2em;
		/* 首行缩进两个汉字宽度 */
	}
</style>

<style>
	.listheader {
		width: 50px;
		height: 50px;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin: auto;
		border-radius: 10px;
	}

	.listTT {
		/* height: 80px; */
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: auto;
		margin: 10px 10%;
		padding: 10px 10px 10px 0;
		color: #fff;
		font-size: 12px;
		background: url('../../static/border.png') no-repeat 100% 100%;
		background-size: 100% 100%;
	}

	.listContent {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.listwallet {
		/* display: flex; */
	}
</style>